<template>
  <div>
    <h1>ref</h1>
    <ul>
      <li ref="lione">这是li的第一个元素</li>
    </ul>
    <ChildCom ref="childRef"></ChildCom>
    <button @click="Aaaa">获取子组件标签的数据</button>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref, } from 'vue'
import ChildCom from "./components/ChildCom.vue"
//ref在vue3当中获取元素 或者子组件标签完成子相父的传值
export default defineComponent({
  setup () {
    const lione = ref<HTMLElement | null>();
    console.log(lione);
    
    //指定组件的数据类型  <InstanceType<typeof ChildCom>>
    const childRef = ref<InstanceType<typeof ChildCom>>();
    console.log(childRef);

     // 获取ref标记的子组件的数据时都需要在函数当中获取，获取数据时不能在setup当中调用函数，需要在浏览器中操作
     const Aaaa = ()=>{
       console.log(childRef.value?.childAaa);
       console.log(childRef.value?.aa);
       
       
     }
    

    return {
      lione,
      childRef,
      Aaaa,
    }
  },
  mounted(){
    console.log(this.$refs.lione);
    
  },
  components:{
    ChildCom,
   
    
  }
})
</script>

<style scoped>

</style>
